<template>
	<el-dialog :visible.sync="options.showDialog" width="800px" class="evalDialog" :append-to-body="true">
		<h3 class="add-title">选择模版</h3>
		<!-- 搜索模板名称组件 -->
		<comSearch :options="searchMsg" style="margin-left: 50px;" @search="search"></comSearch>
		<ul class="template-list">
			<li v-for="(item,index) in templateList" :key="item.templateid" class="clearfix" >
				<span class="template-name">{{item.templateName}}</span>
				<span class="template-used" style="color: #009D12;" @click="$emit('useTemplate',item)">使用</span>
				<span class="template-edit" style="color: #0027FF;" @click="$emit('editTemplate',item)">查看/编辑</span>
				<span class="template-deleted" style="color: #FF0000;" @click="deletedTemplate(item)">删除</span>
			</li>
			<li v-if="templateList.length == 0" style="padding: 50px 0;text-align: center;"><span>暂无数据</span></li>
		</ul>
		
		<div class="pagination">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" 
				:total="paginationMsg.total" :page-sizes="[10, 20, 30, 50, 100]" 
				:current-page="paginationMsg.pagenum" :page-size="paginationMsg.pageSize" 
				layout="total, sizes, prev, pager, next, jumper"background>
			</el-pagination>
		</div>
	</el-dialog>
</template>

<script>
export default{
	components: {
		comSearch: () => import("@/component/common/comSearch.vue"),
	},
	props:{
		options:{
			type: Object,
			require: true
		}
	},
	data(){
		return {
			/* 模板名称条件搜索 */
			searchMsg: {
				noTemplateName: true,
				searchData: {}, //搜索条件
			},
			templateList: [
				/* {templateName: '小曾杂货铺',templateid: 11},
				{templateName: '小曾火锅店',templateid: 22},
				{templateName: '小曾卤味店',templateid: 33}, */
			],
			
			/* 翻页功能数据 */
			paginationMsg: {
				total: 0,
				pageSize: 10,
				pageNum: 1
			}
		}
	},
	methods:{
		/* 获取数据列表 */
		getTemplateList(form){
			let params = {
				pageSize: this.paginationMsg.pageSize,
				pageNum: this.paginationMsg.pageNum,
			}
			if(form){
				Object.assign(params,form);
			}
			this.$payrollAxios.post('/v1/PayRoll/selectPayrollTemplate',params).then(res => {
				console.log(res);
				if(res.data.code === 1){
					let result = res.data.data;
					this.paginationMsg.total = parseInt(result.totalnum);
					this.templateList = result.appPayrollTemplateList;
				}else{
					this.$message.warning(res.data.message);
				}
			})
		},
		/* 条件搜索 */
		search(form){
			this.searchMsg.searchData = form;
			this.getTemplateList(form);
		},
		/* 删除模板 */
		deletedTemplate(data){
			console.log(data);
			this.templateList.forEach((item,index) => {
				if(item.templateid == data.templateid){
					this.templateList.splice(index,1);
				}
			})
			
			this.$confirm('此操作将删除该模板, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$payrollAxios.post('/v1/PayRoll/updateTemplateisDeleted',{templateid: data.templateid}).then(res => {
					console.log(res);
					if(res.data.code === 1){
						this.$message.success('删除成功！');
						this.getTemplateList(this.searchMsg.searchData);
					}else{
						this.$message.warning(res.data.message);
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
			
		},
		
		/* 翻页-页数 */
		handleCurrentChange(val){
			console.log(val);
			this.paginationMsg.pageNum = val;
			this.getTemplateList(this.searchMsg.searchData);
		},
		/* 翻页-条数 */
		handleSizeChange(val){
			console.log(val);
			this.paginationMsg.pageSize = val;
			this.getTemplateList(this.searchMsg.searchData);
		}
		
	},
	watch:{
		'options.showDialog'(){
			if(this.options.showDialog){
				this.paginationMsg = {
					total: 0,
					pageSize: 10,
					pageNum: 1
				}
				this.getTemplateList();
			}
		}
	}
}
</script>

<style scoped="scoped">
.add-title{padding: 30px 0 20px;font-size: 24px;text-align: center;}
.template-list{margin: 20px auto;width: 650px;}
.template-list li{line-height: 26px;}
.template-list .template-name{float: left;}
.template-list .template-edit,.template-list .template-used,.template-list .template-deleted{float: right;margin-left: 20px;cursor: pointer;}

.pagination{padding: 20px 0;margin: 0 auto;width: 650px;}
</style>
